<script setup lang="ts">
import {provide, ref} from "vue";
import MyInject from "@/components/MyInject.vue";
import Card from "@/components/Card.vue";
import DefaultInject from "../../components/DefaultInject.vue";
import InjectAction from "@/components/InjectAction.vue";
import {myKey} from '@/key.ts'
import SymbolKey from "@/components/SymbolKey.vue";

const location = ref("");
const message = ref('')


function reverse() {
  location.value = location.value.split("").reverse().join("");
}

const value = ref("66666")

provide('message', message);//提供源数据
provide('count', 10086);//提供源数据
provide('location', {location, reverse});
provide(myKey, value)
</script>

<template>
  <card title="依赖注入">
    <p>message: {{ message }}</p>
    数据提供者:<input type="text" v-model="message"/>
    <my-inject/>
  </card>
  <card title="inject默认值">
    <p>55</p>
    <default-inject/>
  </card>
  <card title="和响应式数据配合使用">
    <p>location: {{ location }}</p>
    输入信息： <input v-model="location">
    <inject-action/>
  </card>

  <card title="使用 Symbol 作注入名">
    <p> msg: {{value}}</p>
    <input type="text" v-model="value">
    <symbol-key/>
  </card>
</template>

<style scoped>

</style>